<template>
  <div class="meeting-query-container">
    <!-- 顶部筛选区域 -->
    <el-card class="search-card">
      <el-form 
        :model="searchForm" 
        inline 
        class="search-form"
      >
        <el-form-item label="会议主题查询">
          <el-input 
            v-model="searchForm.title" 
            placeholder="请输入会议主题" 
            clearable 
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item label="会议状态">
          <el-select 
            v-model="searchForm.status" 
            placeholder="全部状态" 
            clearable
          >
            <el-option label="未开始" value="0" />
            <el-option label="进行中" value="1" />
            <el-option label="已结束" value="2" />
            <el-option label="逾期" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <Search /> 搜索
          </el-button>
          <el-button @click="resetForm" class="ml-2">
            <Refresh /> 重置
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleExport">
            <Download /> 导出数据
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 会议列表 -->
    <el-card class="mt-4">
      <div class="table-header">
        <span class="title">会议列表</span>
        <span class="count">共 {{ meetingList.length }} 条记录</span>
      </div>
      
      <el-table 
        :data="filteredMeetingList" 
        border 
        style="width: 100%; margin-top: 10px"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column 
          type="selection" 
          width="55" 
        />
        <el-table-column 
          prop="title" 
          label="会议主题" 
          min-width="200"
        />
        <el-table-column 
          prop="startTime" 
          label="开始时间" 
          min-width="180"
        />
        <el-table-column 
          prop="endTime" 
          label="结束时间" 
          min-width="180"
        />
        <el-table-column 
          prop="roomName" 
          label="会议地点" 
          min-width="120"
        >
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.roomName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          prop="status" 
          label="状态" 
          :formatter="formatStatus"
          min-width="100"
        />
        <el-table-column 
          prop="operation" 
          label="操作" 
          min-width="120"
          fixed="right"
        >
          <template #default="scope">
            <el-button 
              type="text" 
              @click="handleDetail(scope.row)"
              class="text-primary"
            >
              详情
            </el-button>
            <el-divider direction="vertical" />
            <el-button 
              type="text" 
              @click="handleEdit(scope.row)"
              class="text-success"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="meetingList.length"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'

// 搜索表单数据
const searchForm = ref({
  title: '',         // 会议主题
  timeRange: null,   // 时间范围 [start, end]
  status: ''         // 会议状态
})

// 会议列表数据
const meetingList = ref([
  {
    id: 1,
    title: '项目启动会',
    roomId: 1,
    roomName: '一号会议室',
    startTime: '2025-08-02 09:00:00',
    endTime: '2025-08-02 10:00:00',
    status: 0,
    createTime: '2025-07-20 10:30:00',
    updateTime: '2025-07-20 10:30:00'
  },
  {
    id: 2,
    title: '需求评审会',
    roomId: 2,
    roomName: '二号会议室',
    startTime: '2025-08-03 14:00:00',
    endTime: '2025-08-03 16:00:00',
    status: 0,
    createTime: '2025-07-20 11:15:00',
    updateTime: '2025-07-20 11:15:00'
  },
  {
    id: 3,
    title: '周工作总结会',
    roomId: 3,
    roomName: '三号会议室',
    startTime: '2025-08-01 16:00:00',
    endTime: '2025-08-01 17:00:00',
    status: 2,
    createTime: '2025-07-20 14:20:00',
    updateTime: '2025-07-20 14:20:00'
  },
  {
    id: 4,
    title: '技术方案讨论会',
    roomId: 1,
    roomName: '一号会议室',
    startTime: '2025-08-04 10:00:00',
    endTime: '2025-08-04 12:00:00',
    status: 0,
    createTime: '2025-07-20 15:40:00',
    updateTime: '2025-07-20 15:40:00'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const loading = ref(false)

// 格式化状态显示
const formatStatus = (row) => {
  const statusMap = {
    0: '未开始',
    1: '进行中',
    2: '已结束',
    3: '逾期'
  }
  return statusMap[row.status] || '未知'
}

// 根据状态获取标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    0: 'info',      // 未开始-蓝色
    1: 'primary',   // 进行中-深蓝色
    2: 'success',   // 已结束-绿色
    3: 'danger'     // 逾期-红色
  }
  return typeMap[status] || 'default'
}

// 筛选后的会议列表
const filteredMeetingList = computed(() => {
  // 实际项目中筛选逻辑通常由后端完成
  return meetingList.value
    .filter(item => {
      // 标题筛选
      if (searchForm.value.title && !item.title.includes(searchForm.value.title)) {
        return false
      }
      // 状态筛选
      if (searchForm.value.status !== '' && item.status !== Number(searchForm.value.status)) {
        return false
      }
      // 时间范围筛选
      if (searchForm.value.timeRange) {
        const [start, end] = searchForm.value.timeRange
        if (item.startTime < start || item.endTime > end) {
          return false
        }
      }
      return true
    })
    .slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

// 搜索处理
const handleSearch = () => {
  loading.value = true
  // 模拟网络请求延迟
  setTimeout(() => {
    // 构建查询参数
    const params = {
      title: searchForm.value.title,
      status: searchForm.value.status,
      startTime: searchForm.value.timeRange?.[0] || '',
      endTime: searchForm.value.timeRange?.[1] || ''
    }
    
    console.log('查询参数:', params)
    // 实际项目中这里会调用API
    // api.getMeetingList(params).then(res => {
    //   meetingList.value = res.data
    // }).finally(() => {
    //   loading.value = false
    // })
    
    loading.value = false
    currentPage.value = 1 // 重置到第一页
    ElMessage.success('搜索成功')
  }, 500)
}

// 重置表单
const resetForm = () => {
  searchForm.value = {
    title: '',
    timeRange: null,
    status: ''
  }
  currentPage.value = 1
}

// 导出数据
const handleExport = () => {
  // 构建导出参数
  const exportParams = {
    title: searchForm.value.title,
    status: searchForm.value.status,
    startTime: searchForm.value.timeRange?.[0] || '',
    endTime: searchForm.value.timeRange?.[1] || ''
  }
  
  console.log('导出参数:', exportParams)
  // 实际项目中调用导出API
  // api.exportMeeting(exportParams).then(res => {
  //   // 处理文件下载
  // })
  
  ElMessage.success('导出成功')
}

// 查看详情
const handleDetail = (row) => {
  ElMessage.info(`查看会议ID: ${row.id} 的详情`)
  console.log('会议详情:', row)
  // 实际项目中跳转详情页或打开详情弹窗
  // router.push(`/meeting/detail/${row.id}`)
}

// 编辑会议
const handleEdit = (row) => {
  ElMessage.info(`编辑会议ID: ${row.id}`)
  console.log('编辑会议:', row)
  // 实际项目中跳转编辑页或打开编辑弹窗
  // router.push(`/meeting/edit/${row.id}`)
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.meeting-query-container {
  padding: 20px;
}

.search-card {
  background-color: #f5f7fa;
  border-radius: 6px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.count {
  color: #666;
  font-size: 14px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

::v-deep .el-tag {
  margin-right: 0;
}

::v-deep .el-divider--vertical {
  height: 16px;
  margin: 0 5px;
}
</style>